<template>
	<view>
		<!-- <view-navbar></view-navbar> -->
		<!-- <view class="h88"></view> -->

		<topbar>
			<!-- 1 -->
			<view class=" flex-align">
				<view class="ms32">
					<view class="flex  ">
						<view class="mt8 ms8 ml48 mr16"><image src="/static/img/safe/54504.svg" mode="" style="width: 43rpx;height: 50rpx;"></image></view>
						<view class="size_48 color_1b mr18">安全设备</view>
						<view class=" mt30 size_26 color_A5">检测到蓝牙定位器</view>
					</view>
				</view>
			</view>
		</topbar>
		<view class="" :style="{ 'padding-top': h + 'px' }"></view>
		<!-- <view class="" :style="{ 'padding-top': getApp().globalData.navHeight + 'px' }"></view> -->

		<!-- <view class="" @click="go">群组设置</view> -->

		<!-- safe -->
		<view class="mr34 ml36">
			<view class="item ms36">
				<view class="row flex-align">
					<view class="flex-align  flex-around" style="width: 100%;">
						<view class=""><image src="/static/img/safe/23.svg" mode="" style="width: 178rpx;height: 128rpx;"></image></view>
						<view class="flex-column">
							<view class="size_30">蓝牙定位器</view>
							<view class="size_24 color_98">未连接</view>
						</view>
						<view class="flex">
							<view class="row1 mr10 flex-cen"><image src="/static/img/safe/54923.svg" mode="" style="width: 44rpx;height: 35rpx;"></image></view>
							<view class="row1 flex-cen" @click="show = true"><image src="/static/img/safe/54632.svg" mode="" style="width: 40rpx;height: 35rpx;"></image></view>
						</view>
					</view>
				</view>
			</view>
			<view class="item ms36">
				<view class="row flex-align">
					<view class="flex-align  flex-around" style="width: 100%;">
						<view class=""><image src="/static/img/safe/1.svg" mode="" style="width: 178rpx;height: 128rpx;"></image></view>
						<view class="flex-column">
							<view class="size_30">智能手环</view>
							<view class="size_24 color_98">未连接</view>
						</view>
						<view class="flex">
							<view class="row1 mr10 flex-cen"><image src="/static/img/safe/SOS.svg" mode="" style="width: 62rpx;height: 42rpx;"></image></view>
							<view class="row1 flex-cen" @click="show = true"><image src="/static/img/safe/54632.svg" mode="" style="width: 40rpx;height: 35rpx;"></image></view>
						</view>
					</view>
				</view>
			</view>
			<view class="item ms36" style="display: none;">
				<view class="row4">
					<view class="flex-align  flex-around pt24" style="width: 100%;">
						<view class=""><image src="/static/img/safe/1.svg" mode="" style="width: 178rpx;height: 128rpx;"></image></view>
						<view class="flex-column">
							<view class="size_30">蓝牙定位器</view>
							<view class="size_24 color color_1D">已连接</view>
						</view>
						<view class="flex">
							<view class="row1 mr10 flex-cen"><image src="/static/img/safe/SOS.svg" mode="" style="width: 62rpx;height: 42rpx;"></image></view>
							<view class="row1 flex-cen" @click="show = true"><image src="/static/img/safe/54632.svg" mode="" style="width: 40rpx;height: 35rpx;"></image></view>
						</view>
					</view>
					<!-- tag -->
					<view class="ml42 mr40">
						<view class="flex">
							<view class="" v-for="item in 5" :key="item">
								<u-tag size="mini" borderColor="transparent" text="标签" plain="true" plainFill="true" shape="circle" type="success" icon="tags-fill"></u-tag>
							</view>
						</view>
					</view>
					<view class="mt30 ml40 ps32">
						<view class="flex">
							<view class="mr2"><image src="/static/img/safe/54936.svg" mode="" style="width: 29rpx;height: 29rpx;"></image></view>
							<view class="">位置：广东省深圳市南山区腾讯大厦</view>
						</view>
					</view>
				</view>
			</view>

			<view class="item ms36" @click="$pub.go('/pages_safe/safeDetail/safeDetail')">
				<view class="row4">
					<view class="flex-align  flex-around pt24" style="width: 100%;">
						<view class=""><image src="/static/img/safe/1.svg" mode="" style="width: 178rpx;height: 128rpx;"></image></view>
						<view class="flex-column">
							<view class="size_30">蓝牙定位器</view>
							<view class="size_24 color color_1D">已连接</view>
						</view>
						<view class="flex">
							<view class="row1 mr10 flex-cen bg_FF"><image src="/static/img/safe/SOS.svg" mode="" style="width: 62rpx;height: 42rpx;"></image></view>
							<view class="row1 flex-cen bg_A1"><image src="/static/img/safe/54632.svg" mode="" style="width: 40rpx;height: 35rpx;"></image></view>
						</view>
					</view>
					<!-- tag -->
					<view class="ml42 mr40">
						<view class="">
							<view class="flex">
								<u-tag size="mini" borderColor="transparent" text="体温" plain="true" plainFill="true" shape="circle" type="success" icon="tags-fill"></u-tag>
								<u-tag size="mini" borderColor="transparent" text="血压" plain="true" plainFill="true" shape="circle" type="success" icon="tags-fill"></u-tag>
								<u-tag size="mini" borderColor="transparent" text="血氧" plain="true" plainFill="true" shape="circle" type="success" icon="tags-fill"></u-tag>
								<u-tag size="mini" borderColor="transparent" text="心率" plain="true" plainFill="true" shape="circle" type="success" icon="tags-fill"></u-tag>
								<u-tag size="mini" borderColor="transparent" text="步数" plain="true" plainFill="true" shape="circle" type="success" icon="tags-fill"></u-tag>
							</view>
						</view>
					</view>
					<view class="mt30 ml40 ps32">
						<view class="flex">
							<view class="mr2"><image src="/static/img/safe/54936.svg" mode="" style="width: 29rpx;height: 29rpx;"></image></view>
							<view class="">位置：广东省深圳市南山区腾讯大厦</view>
						</view>
					</view>
				</view>
			</view>

			<view class="item ms36" @click="$pub.go('/pages_safe/safeDetail/safeDetail')">
				<view class="row4">
					<view class="flex-align  flex-around pt24" style="width: 100%;">
						<view class=""><image src="/static/img/safe/1.svg" mode="" style="width: 178rpx;height: 128rpx;"></image></view>
						<view class="flex-column">
							<view class="size_30">蓝牙定位器</view>
							<view class="size_24 color color_1D">已连接</view>
						</view>
						<view class="flex">
							<view class="row1 mr10 flex-cen bg_ff"><image src="/static/img/safe/54923.svg" mode="" style="width: 62rpx;height: 42rpx;"></image></view>
							<view class="row1 flex-cen bg_A1"><image src="/static/img/safe/54632.svg" mode="" style="width: 40rpx;height: 35rpx;"></image></view>
						</view>
					</view>
					<!-- tag -->
					<view class="ml42 mr40">
						<view class="flex">
							<view class="" v-for="item in 5" :key="item">
								<u-tag size="mini" borderColor="transparent" text="血压" plain="true" plainFill="true" shape="circle" type="error" icon="tags-fill"></u-tag>
							</view>
						</view>
					</view>
					<view class="mt30 ml40 ps32">
						<view class="flex">
							<view class="mr2"><image src="/static/img/safe/54936.svg" mode="" style="width: 29rpx;height: 29rpx;"></image></view>
							<view class="">位置：广东省深圳市南山区腾讯大厦</view>
						</view>
					</view>
				</view>
			</view>

			<view class="item ms36" @click="$pub.go('/pages_safe/safeDetail/safeDetail')">
				<view class="row4">
					<view class="flex-align  flex-around pt24" style="width: 100%;">
						<view class=""><image src="/static/img/safe/1.svg" mode="" style="width: 178rpx;height: 128rpx;"></image></view>
						<view class="flex-column">
							<view class="size_30">蓝牙定位器</view>
							<view class="size_24 color color_1D">已连接</view>
						</view>
						<view class="flex">
							<view class="row1 mr10 flex-cen bg_ff"><image src="/static/img/safe/54923.svg" mode="" style="width: 62rpx;height: 42rpx;"></image></view>
							<view class="row1 flex-cen bg_A1"><image src="/static/img/safe/54632.svg" mode="" style="width: 40rpx;height: 35rpx;"></image></view>
						</view>
					</view>
					<!-- tag -->
					<view class="ml42 mr40">
						<view class="flex">
							<view class="" v-for="item in 5" :key="item">
								<u-tag size="mini" borderColor="transparent" text="血压" plain="true" plainFill="true" shape="circle" type="error" icon="tags-fill"></u-tag>
							</view>
						</view>
					</view>
					<view class="mt30 ml40 ps32">
						<view class="flex">
							<view class="mr2"><image src="/static/img/safe/54936.svg" mode="" style="width: 29rpx;height: 29rpx;"></image></view>
							<view class="">位置：广东省深圳市南山区腾讯大厦</view>
						</view>
					</view>
				</view>
			</view>

			<view class="item ms36" @click="$pub.go('/pages_safe/safeDetail/safeDetail')">
				<view class="row4">
					<view class="flex-align  flex-around pt24" style="width: 100%;">
						<view class=""><image src="/static/img/safe/1.svg" mode="" style="width: 178rpx;height: 128rpx;"></image></view>
						<view class="flex-column">
							<view class="size_30">蓝牙定位器</view>
							<view class="size_24 color color_1D">已连接</view>
						</view>
						<view class="flex">
							<view class="row1 mr10 flex-cen bg_ff"><image src="/static/img/safe/54923.svg" mode="" style="width: 62rpx;height: 42rpx;"></image></view>
							<view class="row1 flex-cen bg_A1"><image src="/static/img/safe/54632.svg" mode="" style="width: 40rpx;height: 35rpx;"></image></view>
						</view>
					</view>
					<!-- tag -->
					<view class="ml42 mr40">
						<view class="flex">
							<view class="" v-for="item in 5" :key="item">
								<u-tag size="mini" borderColor="transparent" text="血压" plain="true" plainFill="true" shape="circle" type="error" icon="tags-fill"></u-tag>
							</view>
						</view>
					</view>
					<view class="mt30 ml40 ps32">
						<view class="flex">
							<view class="mr2"><image src="/static/img/safe/54936.svg" mode="" style="width: 29rpx;height: 29rpx;"></image></view>
							<view class="">位置：广东省深圳市南山区腾讯大厦</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--  -->
		<!-- tip -->
		<view class="flex-cen"><view class="size_26 color_A5">没有更多了</view></view>

		<!--  -->
		<!-- dilog -->
		<u-popup
			mode="bottom"
			:overlay="true"
			:customStyle="{ 'box-shadow': '0rpx 6rpx 60rpx 2rpx rgba(0,0,0,0.16)' }"
			:overlayOpacity="0"
			:show="show"
			@close="close"
			@open="open"
			:round="33"
		>
			<view class="u-popup-slot ">
				<!-- 1 -->
				<view class="mt106 ms38 ml46">
					<view class=""><view class="size_42">设备</view></view>
				</view>
				<!-- 2 -->
				<view class="ml36 mr44 ms98">
					<view class="flex-between">
						<view class=""><image src="/static/img/safe/17.svg" mode="" style="width: 254rpx;height: 184rpx;"></image></view>
						<view class="flex-column">
							<view class="row2 flex-cen">
								<image class="mr16" src="/static/img/safe/54632.svg" mode="" style="width: 40rpx;height: 35rpx;"></image>
								<view class="size_30 color_fff">连接设备</view>
							</view>
							<view class="ml12 mt12 color_91">未连接</view>
							<view class="ml12 mt4">蓝牙定位器</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- tab -->
		<tabbar></tabbar>
		<!--  -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			h: 0
		};
	},
	mounted() {},
	onShow() {
		this.h = getApp().globalData.systemHeight;
		console.log(getApp().globalData.navHeight, 'globalData.navHeight');
		console.log(this.$navHeight, '$navHeight');
	},
	methods: {
		go() {
			uni.navigateTo({
				url: '/pages_circle/circleSet/circleSet'
			});
		},
		open() {
			// console.log('open');
		},
		close() {
			this.show = false;
			// console.log('close');
		}
	}
};
</script>

<style lang="scss" scoped>
.row {
	width: 680rpx;
	height: 182rpx;
	background: #ffffff;
	box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
}
.row1 {
	width: 80rpx;
	height: 80rpx;
	background: #bababa;
	box-shadow: 0rpx 4rpx 12rpx 2rpx rgba(0, 0, 0, 0.1);
	border-radius: 40rpx 40rpx 40rpx 40rpx;
	opacity: 1;
}
.row2 {
	width: 262rpx;
	height: 80rpx;
	background: #a054fe;
	box-shadow: 0rpx 4rpx 12rpx 2rpx rgba(0, 0, 0, 0.1);
	border-radius: 40rpx 40rpx 40rpx 40rpx;
	opacity: 1;
}
.row3 {
	width: 104rpx;
	height: 48rpx;
	background: #2ab900;
	border-radius: 18rpx 18rpx 18rpx 18rpx;
	opacity: 0.09;
}

.row4 {
	width: 680rpx;
	// height: 182rpx;
	background: #ffffff;
	box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
}
</style>
